<template>
	<view class="u-page">
		<card title="基础功能">
			<view class="u-page__tag-item">
				<u-count-to
					:endVal="value"
					@end="end"
				></u-count-to>
			</view>
		</card>
		
		<card title="倒计数">
			<view class="u-page__tag-item">
				<u-count-to :startVal="startVal1"></u-count-to>
			</view>
		</card>
		
		<card title="显示小数位">
			<view class="u-page__tag-item">
				<u-count-to
					:startVal="startVal2"
					:endVal="endVal"
					:decimals="decimals"
				></u-count-to>
			</view>
		</card>
		
		<card title="千分位分隔符">
			<view class="u-page__tag-item">
				<u-count-to
					:startVal="startVal3"
					:endVal="endVal2"
					separator=","
					:decimals="decimals"
				></u-count-to>
			</view>
		</card>
		
		<card title="自定义控制">
			<view class="u-page__tag-item">
				<u-count-to
					ref="uCountTo"
					:endVal="endVal3"
					:autoplay="autoplay"
				></u-count-to>
			</view>
			<view
				class=""
				style="flex: 1;"
			>
				<u-grid
					border
					align="center"
					customStyle="margin-top: 20px;margin-bottom: 20"
				>
					<u-grid-item @click="start">
						<view class="u-grid-slot">
							<view class="u-grid-slot__circle">
								<text class="u-grid-slot__circle__text">开始</text>
							</view>
						</view>
					</u-grid-item>
					<u-grid-item @click="paused">
						<view class="u-grid-slot">
							<view class="u-grid-slot__circle">
								<text class="u-grid-slot__circle__text">暂停</text>
							</view>
						</view>
					</u-grid-item>
					<u-grid-item @click="resume">
						<view class="u-grid-slot">
							<view class="u-grid-slot__circle">
								<text class="u-grid-slot__circle__text">继续</text>
							</view>
						</view>
					</u-grid-item>
				</u-grid>
			</view>
		</card>
		
		<card title="自定义">
			<view class="u-page__tag-item">
				<u-count-to
					:endVal="value"
					color="#909399"
					:fontSize="fontSize"
					:bold="true"
				></u-count-to>
			</view>
		</card>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				value: 3000,
				startVal1: 300,
				startVal2: 100.00,
				endVal: 10.55,
				decimals: 2,
				startVal3: 2000,
				endVal2: 1542,
				endVal3: 3000,
				autoplay: false,
				color: '#FF0000',
				fontSize: 40,
			}
		},
		onLoad() {
			// setTimeout(() => {
			// 	this.value = 3000
			// }, 3000)
		},
		methods: {
			start() {
				this.$refs.uCountTo.start();
			},
			paused() {
				this.$refs.uCountTo.stop()
			},
			resume() {
				this.$refs.uCountTo.resume()
			},
			end() {
				console.log('end');
			}
		}
	}
</script>

<style lang="scss">


	.u-grid-slot {
		border-radius: 100px;
		border-color: #dbfbdb;
		border-width: 2px;
		display: flex;
		flex-direction: row;

		&__circle {
			width: 50px;
			height: 50px;
			background-color: #dbfbdb;
			border-radius: 100px;
			justify-content: center;
			align-items: center;
			margin: 2px;

			&__text {
				color: rgb(25, 190, 107);
				font-size: 13px;
			}
		}
	}
</style>
